<template>
  <div class="system-tool flex">
    <div class="mmt-left flex flex-col h-full justify-between items-center">
      <div style="height: 100%;">
        <ToolMenu ref="toolMenuRef" :menuList="menuList"></ToolMenu>
      </div>
      <div class="mmt-logo"></div>
    </div>
    <div class="mmt-right w-full">
      <div class="mmt-title-bar">
        <NavBar :isHome="false" @updateToolInfo="updateToolInfo"></NavBar>
      </div>
      <div class="mmt-layout-container w-full">
        <div class="mmt-l-con-box f-full">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ToolMenu from "../common-components/tool-menu.vue";
import NavBar from "../common-components/nav-bar.vue";
export default {
  data() {
    return {
    };
  },
  components: {
    ToolMenu,
    NavBar,
  },
  computed: {
    ...mapState({
      modelMenuList: (state) => state.modelManageTool.moduleMenuList,
      scenarioEditMenuList: (state) => state.scenarioEditTool.moduleMenuList,
      experimentDesignMenuList: (state) => state.experimentDesignTool.moduleMenuList,
      evaluationAnalysisMenuList: (state) => state.evaluationAnalysisTool.moduleMenuList,
      simulationRunMenuList: (state) => state.simulationRunTool.moduleMenuList,
      intelligentTrainingMenuList: (state) => state.intelligentTrainingTool.moduleMenuList,
      toolInfo: (state) => state.homePage.toolInfo,
      currentMenu: (state) => state.homePage.currentMenu,
    }),
    menuList() {
      let list = [];
      switch (this.toolInfo.id) {
        case 1:
          list = this.modelMenuList;
          break;
        case 2:
          list = this.scenarioEditMenuList;
          break;
        case 3:
          list = this.experimentDesignMenuList;
          break;
        case 4:
          list = this.evaluationAnalysisMenuList;
          break;
        case 5:
          list = this.simulationRunMenuList;
          break;
        case 6:
          list = this.intelligentTrainingMenuList;
          break;
      }
      return list;
    },
  },
  mounted() { },
  methods: {
    updateToolInfo(tool) {
      this.$store.commit("homePage/SET_TOOL_INFO", tool)
      this.$store.commit("homePage/SET_CURRENT_MENU", this.menuList[0]);
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/styles/themeConfig/themeConfig.scss";

.system-tool {
  height: 100vh;
  background-color: var(--app-component-navigation-bg);

  .mmt-left {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    overflow: hidden;
    flex-basis: 300px; // 主轴方向上初始大小
    user-select: none; // 禁止选中
    background-color: var(--app-nav-bg);
  }

  .mmt-right {
    position: relative;
    height: 100vh;
    width: calc(100vw - 300px);
    background-color: var(--app-nav-bg);

    .mmt-title-bar {
      height: 40px;
    }

    .mmt-layout-container {
      position: relative;
      height: calc(100vh - 40px);
      padding: 0 8px 8px 0;

      .mmt-l-con-box {
        position: relative;
        height: calc(100vh - 48px);
        background: var(--ui-component-background);
        border: 1px solid var(--ui-border-color-base);
        border-radius: 10px;
        overflow: hidden;
        color: var(--ui-text-color);
      }
    }
  }
}
</style>